<template>
  <div class="ai-customer-service">
    <!-- 侧边栏 - 会话列表 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h3>智能AI客服（曾庆优）</h3>
        <el-button type="primary" @click="createNewConversation" :icon="Plus">
          新建对话
        </el-button>
      </div>
      
      <div class="conversation-list">
        <div
          v-for="conv in conversations"
          :key="conv.sessionId"
          class="conversation-item"
          :class="{ active: currentSessionId === conv.sessionId }"
          @click="switchConversation(conv.sessionId)"
        >
          <div class="conversation-info">
            <el-icon><ChatDotRound /></el-icon>
            <span class="conversation-title">{{ conv.title || '新对话' }}</span>
          </div>
          <el-button
            type="danger"
            size="small"
            :icon="Delete"
            circle
            @click.stop="clearConversation(conv.sessionId)"
          />
        </div>
        
        <div v-if="conversations.length === 0" class="empty-conversations">
          <el-empty description="暂无对话记录" />
        </div>
      </div>
    </div>

    <!-- 主聊天区域 -->
    <div class="chat-container">
      <!-- 聊天头部 -->
      <div class="chat-header">
        <div class="header-left">
          <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <div class="header-info">
            <h4>智能AI助手</h4>
            <span class="status">
              <span class="status-dot online"></span>
              在线服务中
            </span>
          </div>
        </div>
        <div class="header-right">
          <el-button @click="refreshData" :icon="RefreshRight" circle />
        </div>
      </div>

      <!-- 聊天消息区域 -->
      <div class="chat-messages" ref="chatMessagesRef">
        <div v-if="messages.length === 0" class="welcome-message">
          <div class="welcome-icon">
            <el-icon :size="80"><ChatDotRound /></el-icon>
          </div>
          <h2>您好！我是智能AI客服</h2>
          <p>我可以帮您解答仓储管理相关的问题，请随时提问！</p>
          <div class="quick-questions">
            <div class="quick-question-title">常见问题：</div>
            <el-button
              v-for="(question, index) in quickQuestions"
              :key="index"
              @click="sendQuickQuestion(question)"
              type="primary"
              plain
            >
              {{ question }}
            </el-button>
          </div>
        </div>

        <div v-else>
          <div
            v-for="(message, index) in messages"
            :key="index"
            class="message-wrapper"
            :class="message.role === 'user' ? 'user-message' : 'ai-message'"
          >
            <div class="message-avatar">
              <el-avatar
                :size="36"
                :src="message.role === 'user' 
                  ? 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                  : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
              />
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="message-sender">{{ message.role === 'user' ? '我' : 'AI助手' }}</span>
                <span class="message-time">{{ formatTime(message.timestamp) }}</span>
              </div>
              <div class="message-text" v-html="formatMessage(message.content)"></div>
            </div>
          </div>

          <!-- 加载中提示 -->
          <div v-if="isLoading" class="message-wrapper ai-message">
            <div class="message-avatar">
              <el-avatar
                :size="36"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="message-sender">AI助手</span>
              </div>
              <div class="message-text loading">
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="chat-input-area">
        <div class="input-toolbar">
          <el-switch
            v-model="useStreamMode"
            active-text="流式输出"
            inactive-text="普通模式"
            style="margin-right: 10px"
          />
          <el-button
            @click="clearCurrentConversation"
            :icon="Delete"
            size="small"
            type="danger"
            plain
          >
            清空当前对话
          </el-button>
        </div>
        <div class="input-wrapper">
          <el-input
            v-model="inputMessage"
            type="textarea"
            :rows="3"
            placeholder="请输入您的问题..."
            @keydown.enter.ctrl="sendMessage"
            :disabled="isLoading"
          />
          <el-button
            type="primary"
            :icon="Promotion"
            @click="sendMessage"
            :loading="isLoading"
            :disabled="!inputMessage.trim()"
          >
            {{ isLoading ? '发送中...' : '发送 (Ctrl+Enter)' }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 侧边栏 - 数据展示 -->
    <div class="data-sidebar">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="历史记录" name="history">
          <div class="history-list">
            <div v-if="tableData.length === 0" class="empty-data">
              <el-empty description="暂无历史数据" />
            </div>
            <div v-else>
              <div
                v-for="(item, index) in tableData"
                :key="index"
                class="history-item"
              >
                <div class="history-header">
                  <el-tag size="small">{{ item.name }}</el-tag>
                  <span class="history-time">{{ item.displayType }}</span>
                </div>
                <div class="history-value">{{ item.value }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="数据统计" name="stats">
          <div class="stats-content">
            <div class="stat-item">
              <div class="stat-label">总对话数</div>
              <div class="stat-value">{{ conversations.length }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">当前消息数</div>
              <div class="stat-value">{{ messages.length }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">使用模式</div>
              <div class="stat-value">{{ useStreamMode ? '流式' : '普通' }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
import { 
  ChatDotRound, Plus, Delete, RefreshRight, Promotion 
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();

// 响应式数据
const currentSessionId = ref('');
const conversations = ref([]);
const messages = ref([]);
const inputMessage = ref('');
const isLoading = ref(false);
const useStreamMode = ref(true); // 🔥 默认启用流式模式（支持记忆功能）
const activeTab = ref('history');
const tableData = ref([]);
const chatMessagesRef = ref(null);

// 快捷问题
const quickQuestions = ref([
  '如何查询库存？',
  '怎么创建入库单？',
  '发货流程是什么？',
  '如何进行盘点？'
]);

/**
 * 静默调用API（不显示错误提示）
 */
const silentApiCall = async (url, data) => {
  try {
    const token = proxy.$store ? proxy.$store.getters.getToken() : '';
    console.log('🔑 调用API:', url);
    console.log('🔑 Token:', token ? `${token.substring(0, 20)}...` : '无Token');
    
    const response = await fetch(`${proxy.http.ipAddress}${url}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': token || '',  // 直接使用token，不添加Bearer前缀（与axios配置一致）
        'lang': localStorage.getItem('UserLanguage') || 'zh-CN'
      },
      body: JSON.stringify(data)
    });
    
    console.log('📡 响应状态:', response.status, response.statusText);
    
    if (response.ok) {
      const result = await response.json();
      console.log('✅ API响应成功:', result);
      return result;
    } else {
      console.log('⚠️ API响应失败:', response.status, response.statusText);
      return null;
    }
  } catch (error) {
    console.log('❌ API调用异常:', url, error.message);
    return null;
  }
};

/**
 * 创建新对话
 */
const createNewConversation = async () => {
  const sessionId = generateSessionId();
  
  console.log('🔵 开始创建新对话...');
  
  // 使用静默API调用
  const response = await silentApiCall('api/XunfeiAI/conversation', {
    sessionId: sessionId,
    message: '你好'
  });
  
  if (response && response.status) {
    const responseSessionId = response.data || sessionId;
    currentSessionId.value = responseSessionId;
    
    conversations.value.unshift({
      sessionId: responseSessionId,
      title: '新对话（在线）',
      createdAt: new Date()
    });
    
    messages.value = [];
    ElMessage.success('已创建新对话');
    console.log('✅ 新对话创建成功，SessionID:', responseSessionId);
  } else {
    console.log('⚠️ 后端未连接，使用本地模式');
    
    // 静默失败，创建本地会话
    currentSessionId.value = sessionId;
    conversations.value.unshift({
      sessionId: sessionId,
      title: '新对话（离线）',
      createdAt: new Date()
    });
    messages.value = [];
  }
};

/**
 * 生成会话ID
 */
const generateSessionId = () => {
  return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
};

/**
 * 切换对话
 */
const switchConversation = (sessionId) => {
  currentSessionId.value = sessionId;
  // 这里可以加载该会话的历史消息
  // 暂时清空消息列表
  messages.value = [];
};

/**
 * 清空指定对话
 */
const clearConversation = async (sessionId) => {
  try {
    await proxy.http.post('/api/XunfeiAI/conversation/clear', sessionId);
    
    // 从列表中移除
    const index = conversations.value.findIndex(c => c.sessionId === sessionId);
    if (index !== -1) {
      conversations.value.splice(index, 1);
    }
    
    // 如果清空的是当前对话，切换到第一个对话或创建新对话
    if (currentSessionId.value === sessionId) {
      if (conversations.value.length > 0) {
        currentSessionId.value = conversations.value[0].sessionId;
      } else {
        await createNewConversation();
      }
    }
    
    ElMessage.success('对话已清空');
  } catch (error) {
    console.error('清空对话失败:', error);
    ElMessage.error('清空对话失败');
  }
};

/**
 * 清空当前对话
 */
const clearCurrentConversation = async () => {
  if (!currentSessionId.value) {
    ElMessage.warning('请先选择一个对话');
    return;
  }
  
  await clearConversation(currentSessionId.value);
  messages.value = [];
};

/**
 * 发送消息
 */
const sendMessage = async () => {
  if (!inputMessage.value.trim()) {
    ElMessage.warning('请输入消息内容');
    return;
  }

  if (!currentSessionId.value) {
    await createNewConversation();
  }

  const userMessage = {
    role: 'user',
    content: inputMessage.value,
    timestamp: new Date()
  };

  messages.value.push(userMessage);
  
  const messageToSend = inputMessage.value;
  inputMessage.value = '';
  
  // 滚动到底部
  nextTick(() => {
    scrollToBottom();
  });

  isLoading.value = true;

  // 发送消息（函数内部已有错误处理）
  if (useStreamMode.value) {
    // 流式输出模式
    await sendStreamMessage(messageToSend);
  } else {
    // 普通模式
    await sendNormalMessage(messageToSend);
  }

  isLoading.value = false;
  nextTick(() => {
    scrollToBottom();
  });
};

/**
 * 普通模式发送消息
 */
const sendNormalMessage = async (message) => {
  console.log('📤 发送普通消息:', message);
  
  // 使用静默API调用
  const response = await silentApiCall('api/XunfeiAI/chat', {
    message: message,
    history: messages.value
      .filter(m => m.role === 'user' || m.role === 'assistant')
      .map(m => ({
        role: m.role === 'user' ? '1' : '2',
        content: m.content
      }))
  });

  console.log('📥 普通消息响应:', response);

  if (response && response.status && response.data) {
    // 处理响应数据：可能是字符串或对象
    let aiContent = '';
    if (typeof response.data === 'string') {
      aiContent = response.data;
    } else if (response.data.message) {
      aiContent = response.data.message;
    } else if (response.data.content) {
      aiContent = response.data.content;
    } else {
      aiContent = JSON.stringify(response.data);
    }
    
    messages.value.push({
      role: 'assistant',
      content: aiContent,
      timestamp: new Date()
    });
    console.log('✅ AI回复已添加:', aiContent);
  } else {
    console.log('⚠️ 后端未连接或响应异常');
    messages.value.push({
      role: 'assistant',
      content: '抱歉，AI服务暂时不可用。请确保后端服务已启动。',
      timestamp: new Date()
    });
  }
};

/**
 * 流式模式发送消息
 */
const sendStreamMessage = async (message) => {
  console.log('🌊 开始流式发送消息:', message);
  
  // 创建一个AI消息占位符
  const aiMessage = {
    role: 'assistant',
    content: '',
    timestamp: new Date()
  };
  messages.value.push(aiMessage);

  try {
    const token = proxy.$store ? proxy.$store.getters.getToken() : '';
    // 🔥 改为调用 AIChat 端点（RagFlow + 记忆功能）
    const url = `${proxy.http.ipAddress}/api/AIChat/chat`;
    
    console.log('🔗 流式请求URL:', url);
    console.log('🔑 Token:', token ? '已设置' : '未设置');
    
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': token || ''
      },
      body: JSON.stringify({
        message: message,
        userId: 'anonymous', // 可以从登录信息获取
        history: messages.value
          .filter(m => m.role === 'user' || m.role === 'assistant')
          .slice(0, -1) // 排除刚添加的占位符
          .map(m => ({
            role: m.role, // AIChat期望 'user' 或 'assistant'，不是 '1' 或 '2'
            content: m.content
          }))
      })
    });

    console.log('📡 流式响应状态:', response.status, response.statusText);

    if (!response.ok) {
      throw new Error(`网络请求失败: ${response.status} ${response.statusText}`);
    }

    console.log('🔄 开始读取流式响应...');
    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    let chunkCount = 0;
    while (true) {
      const { done, value } = await reader.read();
      
      if (done) {
        console.log(`✅ 流式响应读取完成，共 ${chunkCount} 个数据块`);
        break;
      }
      
      chunkCount++;
      const chunk = decoder.decode(value);
      console.log(`📦 收到数据块 ${chunkCount}:`, chunk);
      
      const lines = chunk.split('\n').filter(line => line.trim());
      console.log(`📋 分割后的行数: ${lines.length}`, lines);
      
      for (const line of lines) {
        console.log(`🔍 处理行:`, line);
        if (line.startsWith('data: ')) {
          const data = line.substring(6);
          console.log(`📄 提取数据:`, data);
          if (data === '[DONE]') {
            break;
          }
          
          try {
            const jsonData = JSON.parse(data);
            console.log('✅ 解析成功:', jsonData);
            
            // 🔥 支持两种格式：
            // 1. RagFlow 格式: {"choices": [{"delta": {"content": "..."}}]}
            // 2. 简单格式: {"content": "..."}
            let content = '';
            if (jsonData.choices && jsonData.choices[0]?.delta?.content) {
              content = jsonData.choices[0].delta.content;
            } else if (jsonData.content) {
              content = jsonData.content;
            }
            
            if (content) {
              aiMessage.content += content;
              console.log('📝 累积内容:', aiMessage.content);
              
              // 实时滚动到底部
              nextTick(() => {
                scrollToBottom();
              });
            }
          } catch (e) {
            console.error('❌ 解析流式数据失败:', e);
            console.error('❌ 原始数据:', data);
          }
        }
      }
    }
  } catch (error) {
    console.error('❌ 流式请求失败:', error);
    console.error('❌ 错误堆栈:', error.stack);
    console.log('📝 当前已累积内容:', aiMessage.content);
    
    // 如果已经有内容，就保留；否则显示错误提示
    const index = messages.value.indexOf(aiMessage);
    if (index !== -1 && !aiMessage.content) {
      messages.value[index].content = '抱歉，AI暂时无法响应，请稍后再试。';
    }
    
    console.log('✅ 错误处理完成，当前消息内容:', aiMessage.content);
  }
  
  // 🔥 流式读取结束后，检查内容
  console.log('🏁 流式读取流程结束');
  console.log('📝 最终消息内容:', aiMessage.content);
  console.log('📊 消息总数:', messages.value.length);
};

/**
 * 发送快捷问题
 */
const sendQuickQuestion = (question) => {
  inputMessage.value = question;
  sendMessage();
};

/**
 * 刷新数据
 */
const refreshData = async () => {
  await loadPageData();
  ElMessage.success('数据已刷新');
};

/**
 * 加载分页数据
 */
const loadPageData = async () => {
  // 使用静默API调用
  const response = await silentApiCall('api/XunfeiAI/GetPageData', {
    page: 0,
    rows: 0,
    total: 0,
    tableName: 'string',
    name: 'string',
    wheres: 'string',
    order: 'string',
    export: true,
    value: 'string',
    filter: [
      {
        name: 'string',
        value: 'string',
        displayType: 'string'
      }
    ]
  });

  if (response && response.status && response.data) {
    tableData.value = response.data.rows || [];
    console.log('📊 历史数据加载成功');
  } else {
    console.log('📊 历史数据加载失败，使用空数据');
    tableData.value = [];
  }
};

/**
 * 格式化消息内容（支持Markdown）
 */
const formatMessage = (content) => {
  if (!content) return '';
  
  // 简单的Markdown转换
  let formatted = content
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/\n/g, '<br>')
    .replace(/`(.*?)`/g, '<code>$1</code>');
  
  return formatted;
};

/**
 * 格式化时间
 */
const formatTime = (timestamp) => {
  if (!timestamp) return '';
  
  const date = new Date(timestamp);
  const now = new Date();
  const diff = now - date;
  
  if (diff < 60000) {
    return '刚刚';
  } else if (diff < 3600000) {
    return Math.floor(diff / 60000) + '分钟前';
  } else if (diff < 86400000) {
    return Math.floor(diff / 3600000) + '小时前';
  } else {
    return date.toLocaleString('zh-CN', {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  }
};

/**
 * 滚动到底部
 */
const scrollToBottom = () => {
  if (chatMessagesRef.value) {
    chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight;
  }
};

/**
 * 组件挂载
 */
onMounted(async () => {
  console.log('🚀 AI客服组件已挂载');
  console.log('📍 API基础地址:', proxy.http.ipAddress);
  
  // 初始化会话和数据（每个函数内部有自己的错误处理）
  await createNewConversation();
  await loadPageData();
  
  console.log('✅ 组件初始化完成');
});
</script>

<style scoped lang="less">
.ai-customer-service {
  display: flex;
  height: calc(100vh - 60px);
  background: #f5f7fa;
  gap: 0;
}

/* 侧边栏 - 会话列表 */
.sidebar {
  width: 280px;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  
  h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #303133;
  }
  
  .el-button {
    width: 100%;
  }
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.conversation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    background: #f5f7fa;
  }
  
  &.active {
    background: #ecf5ff;
    border-left: 3px solid #409eff;
  }
}

.conversation-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.conversation-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #606266;
}

.empty-conversations {
  padding: 40px 20px;
}

/* 主聊天区域 */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-width: 0;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-info {
  h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #303133;
  }
}

.status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #909399;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  
  &.online {
    background: #67c23a;
  }
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f5f7fa;
}

.welcome-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  
  .welcome-icon {
    color: #409eff;
    margin-bottom: 20px;
  }
  
  h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: #303133;
  }
  
  p {
    margin: 0 0 30px 0;
    color: #909399;
    font-size: 14px;
  }
}

.quick-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  
  .quick-question-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 10px;
  }
}

.message-wrapper {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  
  &.user-message {
    flex-direction: row-reverse;
    
    .message-content {
      background: #409eff;
      color: #fff;
    }
    
    .message-header {
      flex-direction: row-reverse;
    }
  }
  
  &.ai-message {
    .message-content {
      background: #fff;
      color: #303133;
    }
  }
}

.message-avatar {
  flex-shrink: 0;
}

.message-content {
  max-width: 60%;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}

.message-sender {
  font-size: 12px;
  font-weight: bold;
}

.message-time {
  font-size: 11px;
  opacity: 0.7;
}

.message-text {
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  
  &.loading {
    display: flex;
    gap: 5px;
    padding: 5px 0;
  }
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #409eff;
  animation: loading 1.4s infinite ease-in-out both;
  
  &:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  &:nth-child(2) {
    animation-delay: -0.16s;
  }
}

@keyframes loading {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.chat-input-area {
  border-top: 1px solid #e4e7ed;
  padding: 15px 20px;
  background: #fff;
}

.input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.input-wrapper {
  display: flex;
  gap: 10px;
  
  .el-textarea {
    flex: 1;
  }
  
  .el-button {
    align-self: flex-end;
  }
}

/* 数据侧边栏 */
.data-sidebar {
  width: 320px;
  background: #fff;
  border-left: 1px solid #e4e7ed;
  overflow-y: auto;
}

.history-list {
  padding: 10px;
}

.history-item {
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 10px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-time {
  font-size: 12px;
  color: #909399;
}

.history-value {
  font-size: 14px;
  color: #606266;
}

.stats-content {
  padding: 20px;
}

.stat-item {
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 15px;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.empty-data {
  padding: 40px 20px;
}

/* 滚动条样式 */
.conversation-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.data-sidebar::-webkit-scrollbar {
  width: 6px;
}

.conversation-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.data-sidebar::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
  
  &:hover {
    background: #c0c4cc;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .data-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 220px;
  }
  
  .message-content {
    max-width: 75%;
  }
}
</style>

抱歉，AI服务暂时不可用。请确保后端服务
已启动